<template>
	<div class="mask" v-if="showCart && carData.total > 0" @click="changeShowCart"></div>
	<div class="cart">
		<div class="product" v-if="showCart && carData.total > 0">
			<div class="product_header">
				<div class="product_header_all">
					<span class="product_header_icon iconfont"
						v-html="carData.allChecked ? '&#xe730;' : '&#xe72f;'"
						@click="setAllChecked(shopId)"
					></span>
					全选
				</div>
				<div class="product_header_clear">
					<span class="product_header_clear_btn"
						@click="() => clearCart(shopId)"
					>清空购物车</span>
				</div>
			</div>
			<template v-for="item in carData.productList" :key="item._id">
				<div class="product_item" v-if="item.count > 0">
				<div class="product_item_checked iconfont"
					v-html="item.check ? '&#xe730;' : '&#xe72f;' "
					@click="changeChecked(shopId,item._id)"
				></div>
					<img class="product_item_img" :src="item.imgUrl">
					<div class="product_item_detail">
						<h4 class="product_item_title">{{ item.name }}</h4>
						<p class="product_item_price">
							<span class="product_item_yen">&yen;</span>{{ item.price }}
							<span class="product_item_origin">&yen;{{ item.oldPrice }}</span>
						</p>
					</div>
					<div class="product_number">
						<span class="product_number_minus" @click="addItem(shopId,item._id,item,-1,shopName)">-</span>
						{{ cartList?.[shopId]?.productList?.[item._id]?.count || 0 }}
						<span class="product_number_plus" @click="addItem(shopId,item._id,item,1,shopName)">+</span>
					</div>
				</div>
			</template>
		</div>
		<div class="check">
			<div class="check_icon">
				<img src="http://www.dell-lee.com/imgs/vue3/basket.png" class="check_icon_img" @click="changeShowCart()">
				<div class="check_icon_tag">{{ carData.total }}</div>
			</div>
			<div class="check_info">
				总计: <span class="check_info_price">&yen;{{ carData.price }}</span>
			</div>
			<div class="check_btn" @click="toOrder">
				去结算
			</div>
			
		</div>
	</div>
	<Toast v-if="data.showToast" :message='data.toastMessage' />
</template>

<script>
	import { useRoute,useRouter} from 'vue-router'
	import { useStore } from 'vuex'
	import { reactive } from "vue";
	import Toast from '../../components/Toast.vue'
	import { computed,ref } from 'vue'
	const data = reactive({
				showToast: false,
				toastMessage: ''
			})
	export default{
		name: 'Cart',
		components: { Toast },
		setup() {
			const router = useRouter()
			// 定义一个变量来决定购物车里面的商品显示与否
			const showCart = ref(false)
			const changeShowCart = () => {
				showCart.value = !showCart.value
			}
			// store就是vuex当中所有的对象都包含在其中
			const store = useStore()
			// cartList所有产品都在其中，拿到这个，我们就可以在页面中展示产品的数量
			const cartList = store.state.cartList
			// 获取路由参数
			const route = useRoute();
			// 获取当前店铺ID
			const shopId = route.params.id;
			// 通过cartList取得店铺名称
			const shopName = cartList[shopId].shopName;
			// 添加一个加号的方法
			const addItem = (shopId,productId,productInfo,num,shopName) => {
				store.commit('addItem',{shopId,productId,productInfo,num,shopName})
			}
			// 定义一个计算属性，用于存放购物车里所有相关数据
			const carData = computed(()=>{
				// 首先拿到当前这个店铺的所有商品信息
				let productList = cartList[shopId]?.productList
				// 定义一个变量，用于存放总数量
				let total = 0
				// 定义一个变量，用于存放全选按钮的状态
				let allChecked = true
				// 定义一个变量，用于存放总价
				let price = 0
				for(let i in productList){
					const product = productList[i]
					total += product.count
					// 做一个判断，如果有某一个产品为未选中状态，那就让全选的状态为
					if(!product.check){
						allChecked = false
					}
					if(product.check){
						price += (product.count * product.price)
					}
				}
				return { total,allChecked,productList,price:price.toFixed(2) }
			})
			const clearCart = (shopId) => {
				store.commit('clearCart',{shopId})
			}
			// 通过changeChecked方法实现商品的选中与否
			const changeChecked = (shopId,productId) => {
				store.commit('changeChecked',{shopId,productId})
			}
			// 定义一个全选按钮的方法
			// 计算属性返回的是ref属性，访问的时候应该加上value
			const setAllChecked = (shopId) => {
				let cc = !carData.value.allChecked
				store.commit('setAllChecked',{shopId,cc})
				// 定义一个变量cc，用于决定要修改商品的选中状态
				// 如果传递的是false，那就会让所有商品改成未选中的状态
				// 如果传递的是true，那就会让所有商品改成选中的状态
				// 判断当前全选按钮的状态，如果全选按钮的状态为true，那就说明当前所有商品都被选中了
				// 点击这个全选按钮时就应该让所有商品都变成未选中的状态
				// if(allChecked.value){
				// 	store.commit('setAllChecked',{shopId,cc})
				// }else{
				// 	// 如果当前全选按钮未被选中，那说明里面有某一个商品没选中
				// 	// 那就传递一个true让所有商品都被选中
				// 	cc = true
				// 	store.commit('setAllChecked',{shopId,cc})
				// }
				
			}
			const toOrder =() => {
      if(carData.value.price > 0){
          router.push({path: '/OrderConfirmation/'+shopId})
      }else{
            data.showToast = true
						data.toastMessage = '请添加商品后再点击'
            setTimeout(() => {
              data.showToast = false
							data.toastMessage = ''
            }, 2000)
      }
    }
			return { cartList,shopId,addItem,changeChecked,setAllChecked,clearCart,showCart,changeShowCart,carData,shopName,toOrder,data }
		}
	}
</script>

<style lang="scss" scoped>
	.mask{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background: rgba(0,0,0,.5);
		z-index: 1;
	}
.cart{
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	background: #FFF;
}
	.product {
		overflow-y: scroll;
		flex: 1;
		background: #FFFFFF;
		&_header {
			display: flex;
			line-height: .52rem;
			border-bottom: 1px solid #F1F1F1;
			font-size: .14rem;
			color: #333;
			&_all {
				width: .64rem;
				margin-left: .18rem;
			}
			&_icon {
				display: inline-block;
				margin-right: .1rem;
				vertical-align: top;
				color: #0091FF;
				font-size: .2rem;
			}
			&_clear {
				flex: 1;
				margin-right: .16rem;
				text-align: right;
				&_btn {
					display: inline-block;
				}
			}
		}
		&_item {
			position: relative;
			display: flex;
			padding: .12rem 0;
			margin: 0 .16rem;
			border-bottom: .01rem solid #F1F1F1;
			&_checked {
				line-height: .5rem;
				margin-right: .2rem;
				color: #0091FF;
				font-size: .2rem;
			}
			&_img {
				width: .46rem;
				height: .46rem;
				margin-right: .16rem;
			}
			&_title {
				margin: 0;
				line-height: .2rem;
				font-size: .14rem;
				color: #333;
			}
			&_price {
				margin:.06rem 0 0 0;
				line-height: .2rem;
				font-size: .14rem;
				color: #E93B3B;
			}
			&_yen {
				font-size: .12rem;
			}
			&_origin {
				margin-left: .06rem;
				line-height: .2rem;
				font-size: .12rem;
				color: #999;
				text-decoration: line-through;
			}
		}
		.product_number {
			position: absolute;
			right: 0;
			bottom: .12rem;
			&_minus,&_plus {
				display: inline-block;
				width: .2rem;
				height: .2rem;
				line-height: .16rem;
				border-radius: 50%;
				font-size: .2rem;
				text-align: center;
			}
			&_minus {
				border: .01rem solid #666;
				color: #666;
				margin-right: .05rem;
			}
			&_plus {
				background: #0091FF;
				color: #FFF;
				margin-left: .05rem;
			}
		}
	}
.check {
	display: flex;
	height: .49rem;
	border-top: .01rem solid #F1F1F1;
	line-height: .49rem;
	&_icon {
		position: relative;
		width: .84rem;
		&_img {
			display: block;
			margin: .12rem auto;
			width: .28rem;
			height: .26rem;
		}
		&_tag {
			position: absolute;
			right: .2rem;
			top: .04rem;
			width: .2rem;
			height: .2rem;
			line-height: .2rem;
			background-color: #E93B3B;
			border-radius: 50%;
			font-size: .12rem;
			text-align: center;
			color: #fff;
			transform: scale(.5);
		}
	}
	&_info {
		flex: 1;
		color: #333;
		font-size: .12rem;
		&_price {
			line-height: .49rem;
			color: #E93B3B;
			font-size: .18rem;
		}
	}
	&_btn {
		width: .98rem;
		background-color: #4FB0F9;
		text-align: center;
		color: #FFF;
		font-size: .14rem;
		a {
			color: #FFF;
			text-decoration: none;
		}
	}
}
</style>
